@extends('layouts.mobile_main')

@section('title', '预告')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/public.css?v={{env('CSS_VERSION')}}">
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/kalendae.css?v={{env('CSS_VERSION')}}" type="text/css">
    <script src="{{env('JS_DOMAIN')}}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
        #download{position: fixed;bottom: 1.6rem;right: 0;width: 100%;height: 1.6rem;background: rgba(172,125,204,0.8);}
        #download .down_close{position: absolute;top: -0.6rem;left: 0;width: 0.75rem;}
        #download .down_logo{width: 1.2rem;float: left;margin-left: 0.6rem;margin-top: 0.2rem;}
        #download p{float: left;margin-left: 0.6rem;overflow: hidden;width: 3rem;}
        #download span{float: left;}
        #download .down_down img{width: 2.5rem;float: left;height: 1rem;}
        .busy_name{display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;width: 6.5rem;}
    </style>
@endsection

@section('content')
<header class="trailer">
	<div class="oh fl over_all" style="margin-left: 2rem;">
	    @if(empty($nextevent))
		    <input type="button" class="auto-kal fz_48 co_white fl" name="" data-kal="months: 2, direction: 'future'" value="{{$tomorrow}}至{{$enddate}}">
		@else
		    <input type="button" class="auto-kal fz_48 co_white fl" name="" data-kal="months: 2, direction: 'future'" value="{{$nextevent}}">
		@endif
		<img class="fl down_img" src="{{env('IMAGE_DOMAIN')}}images/down.png?v={{env('IMAGE_VERSION')}}" alt="">
    </div>
    <a href="/mobile/shop/search">
	   <img class="fr search_img" src="{{env('IMAGE_DOMAIN')}}images/search_w.png?v={{env('IMAGE_VERSION')}}" alt="">
    </a>
</header>
<section class="trailer_contain pr">
	<div class="trailer_contain_text oh tc">
		<p class="fl">
			<span class="fz_40 tc">{{$classname}}</span>
			<img style="width: 0.4rem;margin-left: 0.1rem;margin-top: 0.4rem;" class="fl" src="{{env('IMAGE_DOMAIN')}}images/down_g.png?v={{env('IMAGE_VERSION')}}" alt="">
		</p>
		<p>
			<span class="fz_40 tc">{{$areaname}}</span>
			<img style="width: 0.4rem;margin-left: 0.1rem;margin-top: 0.4rem;" class="fl" src="{{env('IMAGE_DOMAIN')}}images/down_g.png?v={{env('IMAGE_VERSION')}}" alt="">
		</p>
		<p>
			<span class="fz_40 tc">排序</span>
			<img style="width: 0.4rem;margin-left: 0.1rem;margin-top: 0.4rem;" class="fl" src="{{env('IMAGE_DOMAIN')}}images/down_g.png?v={{env('IMAGE_VERSION')}}" alt="">
		</p>
	</div>
	<!-- 下拉选择框 -->
	<p class="mark" style="display: none;"></p>
	<div>
		<div class="box_outer oh" style="display: none;">
			<ul class="box_left1 box_left oh fl">
				@foreach($categorylists as $catgoryList)
				    <li>
                        <span>{{$catgoryList['name']}}</span>
                    </li>
				@endforeach
			</ul>
			<div>
				@foreach($categorylists as $categoryList)
				    <ol class="box_right box_right1 fl">
                        <li>
                            <a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&isfirstclass=1&classid={{$categoryList['id']}}&classname=全部&areaname={{$areaname}}">
                                <span>全部</span>
                            </a>
                        </li>
					@foreach($categoryList['childlists'] as $childList)
                        <li>
                            <a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&isfirstclass=0&classid={{$childList['id']}}&classname={{$childList['name']}}&areaname={{$areaname}}">
                                <span>{{$childList['name']}}</span>
                            </a>
                        </li>
					@endforeach
				</ol>
				@endforeach
			</div>
		</div>
		<div class="box_outer oh" style="display: none;">
			<ul class="box_left2 box_left oh fl">
				@foreach($arealists as $arealist)
				    <li>
                        <span>{{$arealist['name']}}</span>
                    </li>
				@endforeach
			</ul>
			<div>
				@foreach($arealists as $arealist)
				    <ol class="box_right box_right2 fl" style="display: block;">
                        <li>
                             <a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&districtid={{$arealist['id']}}&classname={{$classname}}&areaname=全部">
                                <span>全部</span>
                             </a>
                        </li>
                        @foreach($arealist['childlists'] as $childlist)
                            <li>
                                <a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&districtid={{$arealist['id']}}&businessareaid={{$childlist['id']}}&classname={{$classname}}&areaname={{$childlist['name']}}">
                                    <span>{{$childlist['name']}}</span>
                                </a>
                            </li>
                        @endforeach
                    </ol>
				@endforeach
			</div>
		</div>
		<div class="box_outer oh" style="display: none;">
			<ul class="box_left3 box_left oh fl" style="width: 100%;max-height: 8rem;">
                <a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&sort=intelligent">
                    <li>
                        <span>智能排序</span>
                    </li>
                </a>
                <a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&sort=distance">
                    <li>
                        <span>离我最近</span>
                    </li>
                </a>
                {{--<a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&sort=sales">--}}
                    {{--<li>--}}
                        {{--<span>销量优先</span>--}}
                    {{--</li>--}}
                {{--</a>--}}
                <a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&sort=commentmark">
                    <li>
                        <span>评分优先</span>
                    </li>
                </a>
                {{--<a href="/mobile/next?cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}&sort=newshop">--}}
                    {{--<li>--}}
                        {{--<span>新店优先</span>--}}
                    {{--</li>--}}
                {{--</a>--}}
            </ul>
		</div>
	</div>
</section>
<section class="nearby">
	<ul class="nearby_all">
		@foreach($shoplists as $shoplist)
            <li class="oh nearby_cen">
                <a href="/mobile/shop/get?shopid={{$shoplist['shopid']}}&cityid={{$cityid}}&mylongitude={{$mylongitude}}&mylatitude={{$mylatitude}}">
                    <div class="fl nearby_busypic pr">
                        <p class="search_time fz_28 tc">{{date('m', strtotime($shoplist['nextevent']))}}月{{date('d', strtotime($shoplist['nextevent']))}}日 翻倍花</p>
                        <img class="fl" src="{{env('IMAGE_DOMAIN')}}{{$shoplist['logo']}}" alt="">
                    </div>
                    <div class="fr nearby_busytext">
                        <div class="fz_44 oh">
                            <h2 class="fl fz_44 busy_name">{{$shoplist['name']}}</h2>
                            {{--<em class="fr nearby_score">{{$shoplist['commentmark']}}分</em>--}}
                        </div>
                        <p class="fz_34 oh nearby_family">
                            <span class="fl">{{$shoplist['secondclassname']}}</span>
                            {{--<span class="fr">{{$shoplist['ordernumber']}}笔消费</span>--}}
                        </p>
                        <p class="fz_28 oh nearby_address">
                            <span class="fl">{{$shoplist['districtname'] . $shoplist['businessareaname']}}</span>

                             @if(isset($shoplist['distance']) && ($shoplist['distance'] != 0 ))
                                   <span class="fr"><{{$shoplist['distance']}} km</span>
                             @endif
                        </p>
                    </div>
                </a>
            </li>
		@endforeach
	</ul>
</section>
    <nav id="download">
        <img class="down_close" src="{{env('IMAGE_DOMAIN')}}images/index_close.png?v={{env('IMAGE_VERSION')}}" alt="">
        <img class="down_logo" src="{{env('IMAGE_DOMAIN')}}images/index_logo.png?v={{env('IMAGE_VERSION')}}" alt="">
        <p>
            <span class="fz_48 co_white" style="margin-top: 0.2rem;">翻贝网App</span>
            <span class="fz_40 co_white">翻贝网·翻倍花</span>
        </p>
        <a class="down_down" href="/mobile/app/download" style="float: right;margin-top: 0.3rem;margin-right: 0.6rem;"><img src="{{env('IMAGE_DOMAIN')}}images/index_download.png?v={{env('IMAGE_VERSION')}}" alt=""></a>
    </nav>
	@include('layouts.mobile_footer')
@endsection

@section('scriptResources')
@parent
<script src="{{env('JS_DOMAIN')}}/js/kalendae.standalone.js?v={{env('JS_VERSION')}}" type="text/javascript"></script>
<script>
    window.onresize=function(){
		pagesp();
    }
    $(function(){
        $(".down_close").click(function(){
            $("#download").hide();
        })
        var mark_h=$(window).height()-$(".trailer").height()-$(".trailer_contain_text").height();
        $(".mark").css({"height":mark_h-1});
        $(".trailer_contain_text p").click(function(){//下拉框
            var i=$(this).index();
            $(".trailer_contain_text p").eq(i).css({"color":"#9a54c6","border-bottom":" 3px solid #9955C6"}).siblings().css({"color":"#000","border-bottom":" none"});
            $(".trailer_contain_text p img").eq(i).attr("src","{{env('IMAGE_DOMAIN')}}images/down_p.png").parent(".trailer_contain_text p").siblings().children(".trailer_contain_text p img").attr("src","{{env('IMAGE_DOMAIN')}}/images/down_g.png");
            $(".mark").show();
            $(".nearby1").css({"overflow":"hidden","height":mark_h-1});
            $(".box_outer").eq(i).show().siblings().hide();
        })
        $(".box_left1 li").click(function(){
            var i=$(this).index();
            $(".box_left1 li").eq(i).addClass("box_show").siblings().removeClass();
            $(".box_right1").eq(i).show().siblings().hide();
            $("html").click(function(e){
                e.stopPropagation();
                var poy=e.pageY;
                if(poy<=$(".trailer").height()||poy>=($(".trailer").height()+$(".trailer_contain_text").height()+$(".box_outer").height())){
                    $(".mark").hide();
                    $(".nearby1").css({"overflow":null,"height":""});
                    $(".box_outer").hide();
                    $(".trailer_contain_text p").css({"color":"#000","border-bottom":" none"});
                }
            })
        })
        $(".box_left2 li").click(function(){
            var i=$(this).index();
            $(".box_left2 li").eq(i).addClass("box_show").siblings().removeClass();
            $(".box_right2").eq(i).show().siblings().hide();
            $("html").click(function(e){
                e.stopPropagation();
                var poy=e.pageY;
                if(poy<=$(".trailer").height()||poy>=($(".trailer").height()+$(".trailer_contain_text").height()+$(".box_outer").height())){
                    $(".mark").hide();
                    $(".nearby1").css({"overflow":null,"height":""});
                    $(".box_outer").hide();
                    $(".trailer_contain_text p").css({"color":"#000","border-bottom":" none"});
                }
            })
        })
        $(".box_left3 a").click(function(){
            var i=$(this).index();
            $(".box_left3 li").eq(i).addClass("box_show").siblings().removeClass();
            $("html").click(function(e){
                e.stopPropagation();
                var poy=e.pageY;
                if(poy<=$(".trailer").height()||poy>=($(".trailer").height()+$(".trailer_contain_text").height()+$(".box_outer").height())){
                    $(".mark").hide();
                    $(".nearby1").css({"overflow":null,"height":""});
                    $(".box_outer").hide();
                    $(".trailer_contain_text p").css({"color":"#000","border-bottom":" none"});
                }
            })
        })
        $("html").click(function(e){
            e.stopPropagation();
            var poy=e.pageY;
            if(poy<=$(".trailer").height()||poy>=($(".trailer").height()+$(".trailer_contain_text").height()+$(".box_outer").height())){
                $(".mark").hide();
                $(".nearby1").css({"overflow":null,"height":""});
                $(".box_outer").hide();
                $(".trailer_contain_text p").css({"color":"#000","border-bottom":" none"});
                $(".trailer_contain_text p img").attr("src","{{env('IMAGE_DOMAIN')}}images/down_g.png");
            }
        })
        var derail=0;

        //点击日期
        $(".over_all").click(function(){
            if(derail==0){
                $(".k-floating").show();
                // alert($(".k-active").eq(1).length)
                $(".k-active").click(function(){
                    if (derail==1) {
                        console.log($(".auto-kal").val());
                        var nextevent = $(".auto-kal").val();
                        var cityid = "{{$cityid}}";
                        var mylongitude = "{{$mylongitude}}";
                        var mylatitude = "{{$mylatitude}}";

                        $(".k-floating").hide();
                        derail=0;
                        window.location.href = "/mobile/next?cityid="+cityid+"&mylongitude="+mylongitude+"&mylatitude="+mylatitude+"&nextevent="+nextevent;
                    };
                });
                derail=1;
                return false;
            }else{
                $(".k-floating").hide();
                derail=0;
            }
        })
        // for (var i = 0; i < $(".busy_name").length; i++) {//商家名称字数限定
        //     if($(".busy_name").eq(i).html().length>8){
        //         var nearby_busyhtml=$(".busy_name").eq(i).html().substring(0,8);
        //         // alert($(".busy_name").eq(i).html())
        //         $(".busy_name").eq(i).html(nearby_busyhtml+"...");
        //     }
        // };
    })
</script>
@endsection